<template>
  <div>
    <el-dialog v-model="visible" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false"
      width="670">
      <tree-transfer :data="testData" :defaultProps="defaultProps" :defaultCheckedKeys="defaultCheckedKeys"
        v-model:toData="results" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog" class="btnhover"
            style="width: 80px;height: 30px;background-color: rgba(255, 255, 255, 1);border: 1px solid rgba(187, 187, 187, 1);color: rgba(142, 142, 142, 1);">取消</el-button>
          <el-button @click="surebtn" class="btnhover"
            style="width: 80px;height: 30px;background-color: #FF9900;border: 1px solid #FF9900;color: rgba(255,255,255,1);">
            确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import TreeTransfer from './treeTransfer.vue'
import * as getlearnApi from '@/api/spb/partyMemberLearning/index'

const testData = ref([])//组件显示数据
const defaultProps = {
  children: 'children',
  label: 'label',
  value: 'value',
}
// const defaultCheckedKeys = ["1", "1-1"]//默认选中
const defaultCheckedKeys = []
const results = ref([])//选中党员id
const optionOrganization = ref([])//党员树形数据
// 获取党员分类列表
const getPartyData = () => {
  const params = {
    pageNo: 1,
    pageSize: 9999,
  }
  getlearnApi.getOrganizationPage(params).then(async (res) => {
    // let cloneData = JSON.parse(JSON.stringify(res)) // 对源数据深度克隆
    // cloneData = cloneData.filter((father) => {
    //   // 循环所有项，并添加children属性
    //   let branchArr = cloneData.filter((child) => father.id == child.parentId) // 返回每一项的子级数组
    //   branchArr.length > 0 ? (father.children = branchArr) : '' //给父级添加一个children属性，并赋值
    //   return father.parentId == 0 //返回第一层
    // })
    // traverse(cloneData)
    // testData.value = cloneData
    const idList = reactive([])
    optionOrganization.value = []
    res.forEach((item) => {
      idList.push({
        label: item.name,
        value: item.id
      })
    })
    for (const item of idList) {
      const params2 = {
        pageNo: 1,
        pageSize: 100,
        branchId: item.value
      }
      await getlearnApi.getStudyList(params2).then((res) => {
        if (res.length !== 0) {
          optionOrganization.value.push({
            id: item.value,
            name: item.label,
            children: res
          })
        }
      })
    }
    traverse(optionOrganization.value)
    testData.value = optionOrganization.value
  })
}

//处理树形数据加value和label
function traverse(nodes) {
  nodes.forEach(node => {
    if (node.id) {
      node.label = node.name;
      node.value = node.id;
    }
    if (node.children && Array.isArray(node.children)) {
      traverse(node.children);
    }
  })
}
const props = defineProps({
  visible: Boolean,
  userData: Array
})
const emits = defineEmits(['update:visible', 'getuserData'])
const visible = computed({
  get: () => {
    return props.visible
  },
  set: (val) => emits('update:visible', val)
})
watch(
  () => props.userData,
  (val) => {
    if (val) {
      if (props.visible == true) {
        getPartyData()
      }
    }
  },
  { immediate: true }
)
/** 取消 */
const closeDialog = () => {
  if (results.value.length === 0) {
    ElMessage.info('当前未设置指定学习对象')
    emits('getuserData', results.value)
    visible.value = false
  } else {
    ElMessage.warning('当前右侧已选框存在指定学习对象，取消请移除，确认请点击确认按钮！')
  }
}
/** 确定 */
const surebtn = () => {
  if (results.value.length === 0) {
    ElMessage.warning('设置指定学习对象不能为空！')
    return
  }
  ElMessageBox.confirm('此操作将设置当前右侧已选框的全部党员为学习对象, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('设置指定学习对象成功！')
    emits('getuserData', results.value)
    visible.value = false
  })
}
onMounted(() => {
  getPartyData()
})
</script>
<style scoped>
.btnhover:hover {
  opacity: 0.8;
}
::v-deep .el-dialog__body {
  padding: 10px 0 !important;
}
</style>